<template>
  <div class="container">
    <xy-table ref="table" :columns="columns" :list="model.list" :param="params">
      <template slot="addItem">
        <search-header
          :model="params"
          :on-search="onSearch"
          keywords="MerchantName"
        >
          <template #append="{ formData }">
            <el-form-item>
              <select-id
                v-model="formData.AID"
                label-key="AgentName"
                apiName="/api/Common/GetAgentList"
                clearable
              >
              </select-id>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="formData.AgentType"
                clearable
                :placeholder="`${$language.local('请选择')}${$language.local(
                  'AgentType'
                )}`"
              >
                <el-option
                  :label="$language.local('直营')"
                  value="1"
                ></el-option>
                <el-option
                  :label="$language.local('代理')"
                  value="2"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
        </search-header>
      </template>
      <template #cards="">
        <el-row :gutter="16" class="mb-1 mt-1">
          <el-col :span="6">
            <el-card>
              <div class="row">
                <div class="col-1 icon">
                  <i class="el-icon-s-data mr-1"></i>
                </div>
                <div class="card-body col-1">
                  <div class="title">
                    {{ $language.local("totalnum") }}
                  </div>
                  <div class="num">
                    {{ model.totalnum }}
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="row">
                <div class="col-1 icon">
                  <i class="iconfont icon-yue mr-1"></i>
                </div>
                <div class="card-body col-1">
                  <div class="title">
                    {{ $language.local("PaymentOutAmount") }}
                  </div>
                  <div class="num">
                    {{ model.PaymentOutAmount }}
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="row">
                <div class="col-1 icon">
                  <i class="el-icon-s-custom mr-1"></i>
                </div>
                <div class="card-body col-1">
                  <div class="title">
                    {{ $language.local("SumMerchant") }}
                  </div>
                  <div class="num">
                    {{ model.SumMerchant }}
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="row">
                <div class="col-1 icon">
                  <i class="iconfont icon-yue mr-1 green"></i>
                </div>
                <div class="card-body col-1">
                  <div class="title">
                    {{ $language.local("SumCommission") }}
                  </div>
                  <div class="num">
                    {{ model.SumCommission }}
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </template>
      <template #operation="">
        <span></span>
      </template>
    </xy-table>
  </div>
</template>

<script>
export default {
  name: "Profitstatement",
  data() {
    return {
      columns: {
        real_name: "金则炎",
        agentTotal: 5,
        agentThisMonthTotal: "本月新增代理商",
        MerchantTotal: "发展客户数",
        MerchantThisMonthTotal: "本月新增	",
        ThisMonthRechargeAmount: "本月充值累计",
        RechargeAmount: "本年充值金额累计",
        ThisMonthTotalAmount: "本月代发累计",
        TotalAmount: "本年代发金额累计",
      },
      model: "",
      params: {
        SID: "",
        AID: "",
        AgentType: "",
        TradeYM: new Date().format("yyyy年MM月"),
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let response = await this.$http.get(
        "/api/statistics/Profitstatement",
        this.params
      );
      console.log(response);
      this.model = response.data.Data;
    },
    onSearch(e) {
      // this.params = e;
      console.log(e);
      console.log(this.$refs.table);
      this.getData(e);
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  .row {
    display: flex;
    justify-content: space-between;
    .icon {
      display: flex;
      justify-content: center;
      i {
        font-size: 3rem;
      }
      .iconfont {
        &.green {
          color: green !important;
        }
      }
    }
    .card-body {
      .title {
        color: gray;
        font-size: 12px;
      }
      .num {
        margin-top: 1ex;
        font-size: 1.2rem;
      }
    }
  }
}
</style>
